<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/defaultLayout.xhtml">

	<!-- Definiendo la cabecera de la pagina -->
	<ui:define name="title">
		<h:outputText value="Apertura Cta. Aporte" />
	</ui:define>

	<!-- Definiendo el cuerpo de la pagina -->
	<ui:define name="content">

		<h:outputStylesheet library="css" name="main.css" />
		<h:outputScript library="js" name="angular.min.js"></h:outputScript>

		<script type="text/javascript">
			var sistemaFinancieroApp = angular.module('sistemaFinancieroApp', []);
			 
			sistemaFinancieroApp.controller('AperturaCuentaAporteTwoCtrl', function ($scope) {
				$scope.dialogTitular = false;
				$scope.openDialogTitular = function () {
					$scope.dialogTitular = true;
			    };
			    $scope.closeDialogTitular = function () {
					$scope.dialogTitular = false;
			    };	 

			    $scope.dialogBeneficiario = false;
				$scope.openDialogBeneficiario = function () {
					$scope.dialogBeneficiario = true;
			    };
			    $scope.closeDialogBeneficiario = function () {
					$scope.dialogBeneficiario = false;
			    };	    
			});

			function openDlgTitular(data){
				if (data.status == "complete")
					$("#dlgTitular").show();				
			}
		</script>
		<div ng-app="sistemaFinancieroApp"
			ng-controller="AperturaCuentaAporteTwoCtrl">
			<br />
			<div style="margin-left: 50px;">
				<div>
					<div>
						<div class="p6n-api-consent-screen-title p6n-action-bar">TITULARES</div>

					</div>
				</div>
			</div>


			<!-- TITULARES -->
			<h:form id="formTablaTitulares">
				<div class="p6n-content ng-scope">
					<div class="p6n-content-no-nav ng-scope">
						<div class="p6n-main-pane ng-isolate-scope">
							<div class="">
								<div class="ng-scope">
									<table class="p6n-table">
										<thead>
											<tr>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Tipo
														documento </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Nro
														documento </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Apellido
														paterno </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Apellido
														materno </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Nombres </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Sexo </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link">
														F.nacimiento </a></th>
												<th class="p6n-api-list-col-status"><a
													href="javascript:;" pan-sort-header=""
													sort-key="getEnabledAndName" sort-data="sortState"
													class="ng-isolate-scope p6n-clickable-link"> Status </a></th>

												<th class="p6n-api-list-col-status"><a
													href="javascript:;" pan-sort-header=""
													sort-key="getEnabledAndName" sort-data="sortState"
													class="ng-isolate-scope p6n-clickable-link"> Status </a></th>
											</tr>
										</thead>
										<tbody>
											<ui:repeat
												value="#{aperturaCuentaaporteBean.listTitulares()}"
												var="persona">
												<tr class="ng-scope">
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.tipodocumento.abreviatura}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.numerodocumento}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.apellidopaterno}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.apellidomaterno}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.nombres}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.sexo.denominacion}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{persona.fechanacimiento}">
																<f:convertDateTime pattern="dd/MM/yy" />
															</h:outputLabel>
													</a></td>
													<td><h:commandButton value="Edit"
															styleClass="action green" style="margin: 0px;">
															<f:ajax
																listener="#{aperturaCuentaaporteBean.editTitular(persona)}"
																render=":formDialogTitular"></f:ajax>
														</h:commandButton></td>
													<td><h:commandButton value="Remove"
															styleClass="action red" style="margin: 0px;">
															<f:ajax
																listener="#{aperturaCuentaaporteBean.removeTitular(persona)}"
																render="@form" onevent="openDlgTitular"></f:ajax>
														</h:commandButton></td>
												</tr>
											</ui:repeat>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</h:form>



			<div class="p6n-content ng-scope">
				<div class="p6n-envelope">
					<div class="p6n-content-no-nav">
						<div class="p6n-main-pane p6n-acl-pane">
							<div class="p6n-action-bar" style="padding-bottom: 45px;">
								<input type="button" value="Añadir Titular" class="actionn red"
									ng-click="openDialogTitular()" />
							</div>
						</div>
					</div>
				</div>
				<div class="modal-dialog-bg"
					style="opacity: 0.4; width: 1366px; height: 702px;"
					ng-show="dialogTitular"></div>
				<div id="dlgTitular" ng-show="dialogTitular"
					class="modal-dialog p6n-popup" style="left: 402px; top: 50px;">
					<h:form id="formDialogTitular">
						<div class="modal-dialog-content p6n-acl-add-member-popup"
							style="width: 385px;">
							<div class="p6n-api-consent-screen-inputs">
								<div class="sf-separator">
									<h3 class="p6n-api-consent-screen-title">Datos generales</h3>
								</div>
								<div class="p6n-api-consent-screen-input-section">
									<div style="display: inline-block; width: 190px;">
										<div class="p6n-api-consent-screen-label">TIPO DOCUMENTO</div>
										<div>
											<h:selectOneMenu id="cmbTipodocumentoTitular"
												value="#{aperturaCuentaaporteBean.comboTipodocumentoTitular.itemSelected}"
												valueChangeListener="#{aperturaCuentaaporteBean.changeTipodocumentoTitular}"
												required="true"
												requiredMessage="Seleccione tipo de documento">
												<f:selectItem itemLabel="--SELECCIONE--" itemValue="" />
												<f:selectItems
													value="#{aperturaCuentaaporteBean.comboTipodocumentoTitular.items.entrySet()}"
													var="val" itemLabel="#{val.value.abreviatura}"
													itemValue="#{val.key}" />
												<f:ajax></f:ajax>
											</h:selectOneMenu>
										</div>
									</div>
									<div style="display: inline-block; width: 190px;">
										<div class="p6n-api-consent-screen-label"
											style="width: 180px;">NUMERO DOCUMENTO</div>
										<div>
											<h:inputText id="txtDniTitular"
												value="#{aperturaCuentaaporteBean.numeroDocumentoTitular}"
												required="true" maxlength="8" requiredMessage="Ingrese dni"
												validatorMessage="Número de DNI Invalido"
												onkeypress="if (event.keyCode == 13) {onchange(); return false; }">
												<f:validateRegex pattern="(^[0-9]{8}$)" />
												<f:ajax
													listener="#{aperturaCuentaaporteBean.buscarPersonanaturalTitular()}"
													render="@form"></f:ajax>
											</h:inputText>
										</div>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="cmbTipodocumentoTitular" />
									<h:message for="txtDniTitular" />
								</div>
								<div class="p6n-api-consent-screen-input-section">
									<div style="display: inline-block; width: 190px;">
										<div class="p6n-api-consent-screen-label"
											style="width: 190px;">APELLIDO PATERNO</div>
										<div>
											<div>
												<h:inputText id="txtApellidoPaternoTitular"
													value="#{aperturaCuentaaporteBean.apellidoPaternoTitular}"
													required="true" maxlength="50"
													requiredMessage="Ingrese apellido paterno"
													onkeyup="this.value = this.value.toUpperCase();">
												</h:inputText>
											</div>
										</div>
									</div>
									<div style="display: inline-block; width: 190px;">
										<div class="p6n-api-consent-screen-label"
											style="width: 180px;">APELLIDO MATERNO</div>
										<div>
											<div>
												<h:inputText id="txtApellidoMaternoTitular"
													value="#{aperturaCuentaaporteBean.apellidoMaternoTitular}"
													required="true" maxlength="50"
													requiredMessage="Ingrese apellido materno"
													onkeyup="this.value = this.value.toUpperCase();">
												</h:inputText>
											</div>
										</div>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtApellidoPaternoTitular" />
									<h:message for="txtApellidoMaternoTitular" />
								</div>
								<div class="p6n-api-consent-screen-input-section"
									style="width: 190px;">
									<div class="p6n-api-consent-screen-label" style="width: 190px;">NOMBRES</div>
									<div>
										<div>
											<h:inputText id="txtNombresTitular"
												value="#{aperturaCuentaaporteBean.nombresTitular}"
												required="true" maxlength="50"
												requiredMessage="Ingrese nombres"
												onkeyup="this.value = this.value.toUpperCase();"
												style="width:339px;">
											</h:inputText>
										</div>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtNombresTitular" />
								</div>
								<div class="p6n-api-consent-screen-input-section">
									<div style="display: inline-block; width: 190px;">
										<div class="p6n-api-consent-screen-label"
											style="width: 190px;">SEXO</div>
										<div>
											<div>
												<h:selectOneMenu id="cmbSexoTitular"
													value="#{aperturaCuentaaporteBean.comboSexoTitular.itemSelected}"
													required="true" requiredMessage="Seleccione sexo">
													<f:selectItem itemLabel="--Seleccione--" itemValue="" />
													<f:selectItems
														value="#{aperturaCuentaaporteBean.comboSexoTitular.items.entrySet()}"
														var="val" itemLabel="#{val.value.denominacion}"
														itemValue="#{val.key}" />
												</h:selectOneMenu>
											</div>
										</div>
									</div>
									<div style="display: inline-block;">
										<div class="p6n-api-consent-screen-label"
											style="width: 180px;">FECHA DE NACIMIENTO</div>
										<div>
											<div>
												<p:calendar id="txtFechanacimientoTitular"
													value="#{aperturaCuentaaporteBean.fechaNacimientoTitular}"
													navigator="true" pattern="dd/MM/yy" required="true"
													requiredMessage="Ingrese fecha de nacimiento"
													converterMessage="formato incorrecto">
													<f:convertDateTime pattern="dd/MM/yy" />
												</p:calendar>
											</div>
										</div>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="cmbSexoTitular" />
									<h:message for="txtFechanacimientoTitular" />
								</div>
							</div>
							<br />
						</div>

						<div class="modal-dialog-buttons">
							<h:commandButton value="Guardar" styleClass="action blue">
								<f:ajax listener="#{aperturaCuentaaporteBean.addTitular()}"
									execute="@form" render="@form :formTablaTitulares" />
							</h:commandButton>
						</div>
					</h:form>
					<input value="Cancelar" type="button" class="action"
						ng-click="closeDialogTitular()" />
				</div>
			</div>

			<!-- END TITULARES -->

			<!-- BENEFICIARIOS -->

			<br /> <br />
			<div style="margin-left: 50px;">
				<div>
					<div>
						<div class="p6n-api-consent-screen-title p6n-action-bar">BENEFICIARIOS</div>

					</div>
				</div>
			</div>
			<h:form id="formTablaBeneficiarios">
				<div class="p6n-content ng-scope">
					<div class="p6n-content-no-nav ng-scope">
						<div class="p6n-main-pane ng-isolate-scope">
							<div class="">
								<div class="ng-scope">
									<table class="p6n-table">
										<thead>
											<tr>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Nro
														documento </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Apellido
														paterno </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Apellido
														materno </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Nombres </a></th>
												<th><a href="javascript:;"
													class="ng-isolate-scope p6n-clickable-link"> Porcentaje
												</a></th>
												<th class="p6n-api-list-col-status"><a
													href="javascript:;" pan-sort-header=""
													sort-key="getEnabledAndName" sort-data="sortState"
													class="ng-isolate-scope p6n-clickable-link"> Status </a></th>
												<th class="p6n-api-list-col-status"><a
													href="javascript:;" pan-sort-header=""
													sort-key="getEnabledAndName" sort-data="sortState"
													class="ng-isolate-scope p6n-clickable-link"> Status </a></th>
											</tr>
										</thead>
										<tbody>
											<ui:repeat
												value="#{aperturaCuentaaporteBean.listBeneficiarios()}"
												var="beneficiario">
												<tr class="ng-scope">
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.dni}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.apellidopaterno}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.apellidomaterno}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.nombres}" />
													</a></td>
													<td><a href="javascript:;"
														class="p6n-clickable-link ng-binding"> <h:outputLabel
																value="#{beneficiario.porcentajebeneficio}" />
													</a></td>
													<td><h:commandButton value="Edit"
															styleClass="action green" style="margin: 0px;">
															<f:ajax
																listener="#{aperturaCuentaaporteBean.editBeneficiario(beneficiario)}"
																render=":formDialogBeneficiario"></f:ajax>
														</h:commandButton></td>
													<td><h:commandButton value="Remove"
															styleClass="action red" style="margin: 0px;">
															<f:ajax
																listener="#{aperturaCuentaaporteBean.removeBeneficiario(beneficiario)}"
																render="@form" onevent="openDlgBeneficiario"></f:ajax>
														</h:commandButton></td>
												</tr>
											</ui:repeat>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</h:form>



			<div class="p6n-content ng-scope">
				<div class="p6n-envelope">
					<div class="p6n-content-no-nav">
						<div class="p6n-main-pane p6n-acl-pane">
							<div class="p6n-action-bar" style="padding-bottom: 45px;">
								<input type="button" value="Añadir Beneficiario"
									class="action red" ng-click="openDialogBeneficiario()" />
							</div>
						</div>
					</div>
				</div>
				<div class="modal-dialog-bg"
					style="opacity: 0.4; width: 1366px; height: 702px;"
					ng-show="dialogBeneficiario"></div>
				<div id="dlgTitular" ng-show="dialogBeneficiario"
					class="modal-dialog p6n-popup" style="left: 402px; top: 50px;">
					<h:form id="formDialogBeneficiario">
						<div class="modal-dialog-content p6n-acl-add-member-popup"
							style="width: 385px;">
							<div class="p6n-api-consent-screen-inputs">
								<div class="sf-separator">
									<h3 class="p6n-api-consent-screen-title">Beneficiario</h3>
								</div>
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label">NUMERO
										DOCUMENTO</div>
									<div>
										<h:inputText id="txtNumerodocumentoBeneficiario"
											value="#{aperturaCuentaaporteBean.numeroDocumentoBeneficiario}" />
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtNumerodocumentoBeneficiario" />
								</div>
								<div class="p6n-api-consent-screen-input-section">
									<div style="display: inline-block; width: 190px;">
										<div class="p6n-api-consent-screen-label"
											style="width: 190px;">APELLIDO PATERNO</div>
										<div>
											<div>
												<h:inputText id="txtApellidoPaternoBeneficiario"
													value="#{aperturaCuentaaporteBean.apellidoPaternoBeneficiario}"
													required="true" maxlength="50"
													requiredMessage="Ingrese apellido paterno"
													onkeyup="this.value = this.value.toUpperCase();">
												</h:inputText>
											</div>
										</div>
									</div>
									<div style="display: inline-block; width: 190px;">
										<div class="p6n-api-consent-screen-label"
											style="width: 180px;">APELLIDO MATERNO</div>
										<div>
											<div>
												<h:inputText id="txtApellidoMaternoBeneficiario"
													value="#{aperturaCuentaaporteBean.apellidoMaternoBeneficiario}"
													required="true" maxlength="50"
													requiredMessage="Ingrese apellido materno"
													onkeyup="this.value = this.value.toUpperCase();">
												</h:inputText>
											</div>
										</div>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtApellidoPaternoBeneficiario" />
									<h:message for="txtApellidoMaternoBeneficiario" />
								</div>
								<div class="p6n-api-consent-screen-input-section"
									style="width: 190px;">
									<div class="p6n-api-consent-screen-label" style="width: 190px;">NOMBRES</div>
									<div>
										<div>
											<h:inputText id="txtNombresBeneficiario"
												value="#{aperturaCuentaaporteBean.nombresBeneficiario}"
												required="true" maxlength="50"
												requiredMessage="Ingrese nombres"
												onkeyup="this.value = this.value.toUpperCase();"
												style="width:339px;">
											</h:inputText>
										</div>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtNombresBeneficiario" />
								</div>
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label" style="width: 190px;">PORCENTAJE
										BENEFICIO</div>
									<div>
										<div>
											<h:inputText id="txtPorcentajebeneficiarioBeneficiario"
												value="#{aperturaCuentaaporteBean.porcentajeBeneficio}" />
										</div>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtPorcentajebeneficiarioBeneficiario" />
								</div>
							</div>
							<br />
						</div>
						<div class="modal-dialog-buttons">
							<h:commandButton value="Guardar" styleClass="action blue">
								<f:ajax listener="#{aperturaCuentaaporteBean.addBeneficiario()}"
									execute="@form" render="@form :formTablaBeneficiarios" />
							</h:commandButton>
						</div>
					</h:form>
					<input value="Cancelar" type="button" class="action"
						ng-click="closeDialogBeneficiario()" />
				</div>
			</div>
			<!-- END BENEFICIARIOS -->





		</div>































	</ui:define>

</ui:composition>
</html>